<template>
  <el-dialog title="时段配置" width="600px" :close-on-click-modal="false" :visible.sync="visible" @closed="onClosed">
    <template v-if="visible">
      <super-form v-bind="{...superFormConfig}" />
    </template>
  </el-dialog>
</template>

<script>
import SuperForm from '@/components/SuperForm'
import { fetchAttendanceRecordAdd, fetchAttendanceRecordUpdate, fetchAttendanceRecordGet } from '@/api/sanitation/attendanceRecord'
import { fetchDropDeptAllList, fetchDropAccountAllList, fetchDropCarAllList } from '@/api/common/commonDropDown'
export default {
  components: {
    SuperForm
  },
  props: {
    taskType: {
      type: Number,
      default: 0
    },
    formatFormRender: {
      type: Function,
      default: _ => Promise.resolve(_)
    },
    onSubmit: {
      type: Function,
      default: () => {}
    }
  },
  data: function() {
    return {
      form: {},
      componentList: [],
      superFormConfig: {

      },
      visible: false
    }
  },
  methods: {

    open(attendanceShiftId, id) {
      this.$data.attendanceShiftId = attendanceShiftId
      this.$data.id = id
      this.postCarAllList().then(res => {
        if (id) {
          this.postGet(id).then(() => {
            this.setSuperForm()
            this.$data.visible = true
          })
        } else {
          this.setSuperForm()
          this.$data.visible = true
        }
      })
    },
    setSuperForm() {
      const cascaderAccountIdConfig = {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level, value } = node
          if (level === 0) {
            this.postDeptAllList().then(res => {
              resolve(res)
            })
          } else {
            this.postAccountAllList(value).then(res => {
              resolve(res)
            })
          }
        }
      }
      const timeFormat = { format: 'HH:mm', valueFormat: 'HH:mm', isRange: true, style: { width: '95.5%' }}
      const superFormConfig = {
        size: 'small',
        otherAttrs: {
          labelWidth: '100px'
        },
        renderFormItem: [
          { type: 'time', label: '作业时间', required: true, key: 'period', subKey: ['startPeriod', 'endPeriod'], slotAttrs: { ...timeFormat }, col: 24 },
          { type: 'cascader', label: '作业人员', required: true, key: 'accountId', slotAttrs: { props: cascaderAccountIdConfig }, col: 12 },

          { type: 'select', label: '作业车辆', required: true, key: 'carId', slotAttrs: { options: this.$data.carList }, col: 12 },
          { type: 'input', label: '频次', required: true, key: 'frequency', col: 24, slotAttrs: { style: { width: '95.5%' }}}
        ],
        formButtons: {
          isDialog: true,
          submitName: '保存',
          resetName: '取消',
          submitCallback: (data) => {
            this.postSubmit(data)
          },
          resetCallback: () => {
            this.$data.visible = false
          }
        }
      }
      if (this.$data.formData) {
        superFormConfig.formData = this.$data.formData
      }
      this.$props.formatFormRender(superFormConfig.renderFormItem).then(res => {
        superFormConfig.renderFormItem = res
        this.$data.superFormConfig = superFormConfig
      })
    },
    onClosed() {
      this.$data.formData = {}
    },
    checkFormData(formData) {
      if (!formData.accountId || formData.accountId.length < 2) {
        this.$message('请选择人员', { type: 'error' })
        return false
      }
      return true
    },
    postGet(id) {
      return fetchAttendanceRecordGet({ id }).then(res => {
        this.$data.formData = res
      })
    },
    postDeptAllList() {
      return fetchDropDeptAllList().then(res => {
        return res.map(e => ({ label: e.name, value: e.id }))
      })
    },
    postAccountAllList(deptId) {
      return fetchDropAccountAllList({ deptId }).then(res => {
        return res.map(e => ({ label: e.name, value: e.id, leaf: true }))
      })
    },
    postCarAllList() {
      return fetchDropCarAllList().then(res => {
        const carList = res.map(e => ({ key: e.id, value: e.name }))
        this.$data.carList = carList
      })
    },

    postSubmit(formData) {
      if (!this.checkFormData(formData)) {
        return
      }

      const post = this.$data.id ? fetchAttendanceRecordUpdate : fetchAttendanceRecordAdd
      formData.type = this.$props.taskType
      formData.accountId = formData.accountId[1]
      formData.carPlatenumber = (this.$data.carList.find(e => e.key === formData.carId) || {}).value
      formData.attendanceShiftId = this.$data.attendanceShiftId

      const { id, startPeriod, endPeriod, accountId, carId, type, frequency, carPlatenumber, attendanceShiftId } = formData
      post({ id, startPeriod, endPeriod, accountId, carId, type, frequency, carPlatenumber, attendanceShiftId }).then(() => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$data.visible = false
        this.$props.onSubmit()
      })
    }
  }
}
</script>

<style>

</style>
